<template>
  <div class="order">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部订单" name="first">
        <el-table :data="allOrderData.list" style="width: 100%" id="custermer_table">
          <el-table-column prop="id" label="订单编号" min-width="78" align="center"></el-table-column>
          <el-table-column label="下单时间" min-width="219" align="center">
			  <template slot-scope="{row}">
              <span>{{row.orderTime | dateParse}}</span>
            </template>
		  </el-table-column>
          <el-table-column prop="total" label="总价" min-width="219" align="center"></el-table-column>
          <el-table-column prop="status" label="状态" min-width="219" align="center"></el-table-column>
		  <el-table-column prop="customerId" label="顾客ID" min-width="219" align="center"></el-table-column>
          <el-table-column label="操作" min-width="150" align="center">
            <template slot-scope="{row}">
              <el-button type="text" size="small" @click="toDetails(row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="order_page">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total1"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="待支付" name="second">
		  <el-table :data="unpayOrderData.list" style="width: 100%" id="custermer_table">
          <el-table-column prop="id" label="订单编号" min-width="78" align="center"></el-table-column>
          <el-table-column label="下单时间" min-width="219" align="center">
			  <template slot-scope="{row}">
              <span>{{row.orderTime | dateParse}}</span>
            </template>
		  </el-table-column>
          <el-table-column prop="total" label="总价" min-width="219" align="center"></el-table-column>
          <el-table-column prop="status" label="状态" min-width="219" align="center"></el-table-column>
		  <el-table-column prop="customerId" label="顾客ID" min-width="219" align="center"></el-table-column>
          <el-table-column label="操作" min-width="150" align="center">
            <template slot-scope="{row}">
              <el-button type="text" size="small" @click="toDetails(row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="order_page">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total2"
          ></el-pagination>
        </div>
	  </el-tab-pane>
      <el-tab-pane label="待派单" name="third">
		  <el-table :data="unsendOrderData.list" style="width: 100%" id="custermer_table">
          <el-table-column prop="id" label="订单编号" min-width="78" align="center"></el-table-column>
          <el-table-column label="下单时间" min-width="219" align="center">
			  <template slot-scope="{row}">
              <span>{{row.orderTime | dateParse}}</span>
            </template>
		  </el-table-column>
          <el-table-column prop="total" label="总价" min-width="219" align="center"></el-table-column>
          <el-table-column prop="status" label="状态" min-width="219" align="center"></el-table-column>
		  <el-table-column prop="customerId" label="顾客ID" min-width="219" align="center"></el-table-column>
          <el-table-column label="操作" min-width="150" align="center">
            <template slot-scope="{row}">
              <el-button type="text" size="small" @click="toDetails(row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="order_page">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total3"
          ></el-pagination>
        </div>
	  </el-tab-pane>
      <el-tab-pane label="待接单" name="fourth">
		  <el-table :data="waitOrderData.list" style="width: 100%" id="custermer_table">
          <el-table-column prop="id" label="订单编号" min-width="78" align="center"></el-table-column>
          <el-table-column label="下单时间" min-width="219" align="center">
			  <template slot-scope="{row}">
              <span>{{row.orderTime | dateParse}}</span>
            </template>
		  </el-table-column>
          <el-table-column prop="total" label="总价" min-width="219" align="center"></el-table-column>
          <el-table-column prop="status" label="状态" min-width="219" align="center"></el-table-column>
		  <el-table-column prop="customerId" label="顾客ID" min-width="219" align="center"></el-table-column>
          <el-table-column label="操作" min-width="150" align="center">
            <template slot-scope="{row}">
              <el-button type="text" size="small" @click="toDetails(row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="order_page">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total4"
          ></el-pagination>
        </div>
	  </el-tab-pane>
      <el-tab-pane label="待服务" name="fifth">
		  <el-table :data="serviceOrderData.list" style="width: 100%" id="custermer_table">
          <el-table-column prop="id" label="订单编号" min-width="78" align="center"></el-table-column>
          <el-table-column label="下单时间" min-width="219" align="center">
			  <template slot-scope="{row}">
              <span>{{row.orderTime | dateParse}}</span>
            </template>
		  </el-table-column>
          <el-table-column prop="total" label="总价" min-width="219" align="center"></el-table-column>
          <el-table-column prop="status" label="状态" min-width="219" align="center"></el-table-column>
		  <el-table-column prop="customerId" label="顾客ID" min-width="219" align="center"></el-table-column>
          <el-table-column label="操作" min-width="150" align="center">
            <template slot-scope="{row}">
              <el-button type="text" size="small" @click="toDetails(row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="order_page">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total5"
          ></el-pagination>
        </div>
	  </el-tab-pane>
      <el-tab-pane label="待确认" name="sixth">
		  <el-table :data="comfirmedOrderData.list" style="width: 100%" id="custermer_table">
          <el-table-column prop="id" label="订单编号" min-width="78" align="center"></el-table-column>
          <el-table-column label="下单时间" min-width="219" align="center">
			  <template slot-scope="{row}">
              <span>{{row.orderTime | dateParse}}</span>
            </template>
		  </el-table-column>
          <el-table-column prop="total" label="总价" min-width="219" align="center"></el-table-column>
          <el-table-column prop="status" label="状态" min-width="219" align="center"></el-table-column>
		  <el-table-column prop="customerId" label="顾客ID" min-width="219" align="center"></el-table-column>
          <el-table-column label="操作" min-width="150" align="center">
            <template slot-scope="{row}">
              <el-button type="text" size="small" @click="toDetails(row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="order_page">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total6"
          ></el-pagination>
        </div>
	  </el-tab-pane>
      <el-tab-pane label="已完成" name="seventh">
		  <el-table :data="offOrderData.list" style="width: 100%" id="custermer_table">
          <el-table-column prop="id" label="订单编号" min-width="78" align="center"></el-table-column>
          <el-table-column label="下单时间" min-width="219" align="center">
			  <template slot-scope="{row}">
              <span>{{row.orderTime | dateParse}}</span>
            </template>
		  </el-table-column>
          <el-table-column prop="total" label="总价" min-width="219" align="center"></el-table-column>
          <el-table-column prop="status" label="状态" min-width="219" align="center"></el-table-column>
		  <el-table-column prop="customerId" label="顾客ID" min-width="219" align="center"></el-table-column>
          <el-table-column label="操作" min-width="150" align="center">
            <template slot-scope="{row}">
              <el-button type="text" size="small" @click="toDetails(row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="order_page">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total7"
          ></el-pagination>
        </div>
	  </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      page: 0,
      pageSize: 5,
      total1: 10,
      total2:10,
      total3:10,
      total4:10,
      total5:10,
      total6:10,
      total7:10,
      activeName: "first"
    };
  },
  created() {
    this.loadOrders();
  },
  computed: {
    ...mapState("order", ["allOrderData","unpayOrderData","unsendOrderData","waitOrderData","serviceOrderData","comfirmedOrderData","offOrderData"])
  },
  methods: {
    ...mapActions("order", ["toLoadAllOrderData","toLoadUnpayOrderData","toLoadUnsendOrderData","toLoadWaitOrderData","toLoadServiceOrderData","toLoadComfirmedOrderData","toLoadOffOrderData"]),
    loadOrders() {
      let obj1 = {
        page: this.page,
        pageSize: this.pageSize
      };
      this.toLoadAllOrderData(obj1).then(res => {
        this.total1 = this.allOrderData.total;
	  });
	  let obj2 = {
        page: this.page,
		pageSize: this.pageSize,
		status:'待支付'
      };
	  this.toLoadUnpayOrderData(obj2).then(res=>{
        this.total2 = this.unpayOrderData.total;
	  });
	  let obj3 = {
        page: this.page,
		pageSize: this.pageSize,
		status:'待派单'
      };
	  this.toLoadUnsendOrderData(obj3).then(res=>{
        this.total3 = this.unsendOrderData.total;
	  })
	  let obj4 = {
        page: this.page,
		pageSize: this.pageSize,
		status:'待接单'
      };
	  this.toLoadWaitOrderData(obj4).then(res=>{
        this.total4 = this.waitOrderData.total;
	  })
	  let obj5 = {
        page: this.page,
		pageSize: this.pageSize,
		status:'待服务'
      };
	  this.toLoadServiceOrderData(obj5).then(res=>{
        this.total5 = this.serviceOrderData.total;
	  })
	  let obj6 = {
        page: this.page,
		pageSize: this.pageSize,
		status:'待确认'
      };
	  this.toLoadComfirmedOrderData(obj6).then(res=>{
        this.total6 = this.comfirmedOrderData.total;
	  })
	  let obj7 = {
        page: this.page,
		pageSize: this.pageSize,
		status:'已完成'
      };
	  this.toLoadOffOrderData(obj7).then(res=>{
        this.total7 = this.offOrderData.total;
	  })
	},
	handleCurrentChange(val){
		this.page=val-1;
		this.loadOrders();
	},
	handleClick(tab, event) {
        // console.log(tab, event);
	},
	toDetails(row){
		this.$router.push({ name: "orderDetails", query: { id: row.id } });

	}
  }
};
</script>
<style scope>
.order {
  padding: 10px;
}
.order_page{
	margin-top:10px
}
</style>
